<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/app.css">
</head>

<body ng-app="myApp">
<div class="generic-container"
     ng-controller="UserController as ctrl">
    <div class="panel panel-default">
        <div class="panel-heading"><span class="lead">Object Registration Form </span></div>
        <div class="formcontainer">
            <form ng-submit="ctrl.submit()" name="myForm" class="form-horizontal">
                <input type="hidden" ng-model="ctrl.user.id"/>

                <div class="row">
                    <div class="form-group col-md-12">
                        <label class="col-md-2 control-lable" for="title">Title</label>
                        <div class="col-md-7">
                            <input type="text" ng-model="ctrl.user.title" id="title"
                                   class="title form-control input-sm"
                                   placeholder="Enter your Title" required
                                   ng-minlength="3"/>
                        </div>
                    </div>

                    <div class="form-group col-md-12">
                        <label class="col-md-2 control-lable" for="value">Value</label>
                        <div class="col-md-7">
                            <input type="number" ng-model="ctrl.user.value" id="value"
                                   class="form-control input-sm"
                                   placeholder="Enter your Value"/>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="form-actions floatRight">
                        <input type="submit" value="{{!ctrl.user.id ? 'Create' : 'Update'}}" class="btn btn-primary btn-sm"
                               ng-disabled="myForm.$invalid">
                        <button type="button" ng-click="ctrl.reset()" class="btn btn-warning btn-sm"
                                ng-disabled="myForm.$pristine">Reset Form
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="panel panel-default">

        <!-- Default panel contents -->
        <div class="panel-heading"><span class="lead">List of Objects </span></div>
        <div class="tablecontainer">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>Id</th>
                    <th>Title</th>
                    <th>Value</th>
                    <th width="20%">
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="u in ctrl.users">
                    <td><span ng-bind="u.id"></span></td>
                    <td><span ng-bind="u.title"></span></td>
                    <td><span ng-bind="u.value"></span></td>
                    <td>
                        <button type="button" ng-click="ctrl.edit(u.id)" class="btn btn-success custom-width">Update
                        </button>
                        <button type="button" ng-click="ctrl.remove(u.id)" class="btn btn-danger custom-width">Delete
                        </button>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="./js/app.js"></script>
<script src="./js/interceptor/authInterceptor.js"></script>
<script src="./js/service/user_service.js"></script>
<script src="./js/controller/user_controller.js"></script>
</body>
</html>